import React, { forwardRef, useEffect, useImperativeHandle, useState, useRef } from 'react';

import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Radio,
  Tag,
  Select,
  InputNumber,
  message,
  Row,
  Col,
} from 'antd';
import { modalLayoutLg, modalLayoutMd, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
const DictModal = (props: any, refs: any) => {
  const [form] = Form.useForm();
  // const [fileList,setfileList] = useState([]);
  const [measureClassData, setmeasureClassData] = useState([]);
  const { setFieldsValue, resetFields } = form;

  const [code, setCode] = useState('');
  const [isModalVisible, setIsModalVisible] = useState(false);
  const { TextArea } = Input;
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };

  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setCode('');
    resetFields();
    props.callback && props.callback();
  };
  //页面加载初始化
  useEffect(() => {
    getBusinessTypeList();
  }, []);
  //业务类型列表
  const [businessTypeListEnum, setBusinessTypeListEnum] = useState([]);

  //业务类型列表
  const getBusinessTypeList = () => {
    request('/sys/dict/getDictListByType', {
      method: 'POST',
      data: { type: 'message_template_type' },
    }).then((res) => {
      let list = res?.data || [];
      list.map((e, i) => {
        list[i]['name'] = e['label'];
        list[i]['key'] = e['value'];
      });
      setBusinessTypeListEnum(list);
    });
  };
  //确定
  const handleOk = () => {
    form
      .validateFields()
      .then((vals) => {
        let Obj = form.getFieldsValue();
        Obj = {
          ...Obj,
        };

        const url = code ? '/message/template/edit' : '/message/template/add';
        if (code) {
          Obj.id = code;
        } else {
        }
        request(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          data: Obj,
        }).then((res) => {
          message.success(res?.meta?.msg);
          setIsModalVisible(false);
          handleCancel();
        });
      })
      .catch((info) => { });
  };

  const getDetail = (id: any) => {
    request('/message/template/queryById?id=' + id, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        id,
      },
    }).then((res) => {
      setFieldsValue(res?.data);
      showModal();
    });
  };
  useImperativeHandle(refs, () => ({
    init: (id: any, record: any) => {
      if (id) {
        setCode(id);
        getDetail(id);
      } else {
        resetFields();
        showModal();
      }

      // setfileList([]);
    },
  }));

  const options = [
    { label: '邮件', value: '1' },
    { label: '手机短信', value: '2' },
    { label: '微信', value: '3' },
  ];
  return (
    <Modal
      title={code === '' ? '新增' : '编辑'}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      centered
      width={600}
      maskClosable={false}
      bodyStyle={{
        maxHeight: window.innerHeight - 150,
        overflowY: 'auto',
      }}
    >
      <Form form={form}  {...modalLayoutMd}>
        <Form.Item
          label="模板名称"
          name="templateName"
          rules={[{ required: true, message: '请输入模板名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="模板编号"
          name="templateCode"

        >
          <Input />
        </Form.Item>

        <Form.Item
          label="接收方式"
          name="modeType"
          rules={[{ required: true, message: '请输入接收方式!' }]}
        >
          <Select options={options}></Select>
        </Form.Item>

        <Form.Item
          label="消息类型"
          name="templateType"
          rules={[{ required: true, message: '请选择消息类型!' }]}
        >
          <Select placeholder="请选择">
            {businessTypeListEnum.map((item, i) => {
              return (
                <Select.Option key={item.key} title={item.name} value={item.key}>
                  {item.name}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>



        <Form.Item label="模板内容" name="content">
          <TextArea rows={4} />
        </Form.Item>

      </Form>
    </Modal >
  );
};
const AddMCom = forwardRef(DictModal);

export default AddMCom;
